{% extends "base.html" %}
{% load i18n %}
{% block head %}
	<title>{%trans "蓝鲸开发框架" %}</title>
	{{ block.super }}
{% endblock %}

{% block content %}
    <div>
        {# ---------------------------------------------图片上传start------------------------------------------------- #}
        <div id="up-image" style="height: 100px; width: 300px">
            <form method="post" enctype="multipart/form-data" action="upload/">
                {% csrf_token %}
                {# accept为支持何种格式的文件 #}
                <input type="file" id="exampleInputFile" name="pics" accept="image/png,image/gif,image/jpeg">
                <button style="float:right;margin-top:22px" type="submit" class="btn btn-primary btn-lg">Submit</button>
            </form>
        </div>
        {# ---------------------------------------------图片上传end------------------------------------------------- #}

        {# ---------------------------------------------展示图片start------------------------------------------------- #}
        <div id="images">
            {# image_list是后端传过来的变量，我们直接进行for循环 #}
            {% for image in image_list %}
                <div style="display: inline-block">
                    <div>
                        {# 我们依次根据image.image_url里的数据进行拼接图片url地址 #}
                        <img src="{{ image.image_url }}" alt="{{ image.image_id }}" style="width: 200px; height: 200px">
                        <a href="{% url 'doc:download' image.image_id %}">下载该图片</a>
                    </div>
                    <hr>
                </div>
            {% endfor %}
        </div>
        {# --------------------------------------------展示图片end------------------------------------------------- #}
    </div>
{% endblock %}